<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>五角星的绘制demo</title>
    <style>
        *{margin: 0;padding: 0;}
    </style>
</head>
<body style="height: 100%">
<canvas id="canvas" style="height: 100%">该浏览器不支持canvas,请更换浏览器后重试</canvas>
</body>
<script>
    var CANVAS_WINDTH = document.body.clientWidth;
    var CANVAS_HEIGHT = document.body.clientHeight;
    window.onload =function () {
        var canvas = document.getElementById("canvas");
        canvas.width = CANVAS_WINDTH;
        canvas.height = CANVAS_HEIGHT;
        var cxt = canvas.getContext('2d');
        var linear = cxt.createRadialGradient(canvas.width/2,CANVAS_HEIGHT,0,canvas.width/2,canvas.height,canvas.width/2);
        linear.addColorStop(0.0,"#035");
        linear.addColorStop(1.0,"black");
        cxt.fillStyle = linear;
        cxt.fillRect(0,0,canvas.width,canvas.height);
        for(var i =0;i<150;i++){
            var fillColor = "#FFF738";
            var rot = getRandom(0,360,0);
            var R = getRandom(10,15,0);
            var r = getRandom(5,7,0);
            var left = getRandom(R,CANVAS_WINDTH-R,0);
            var top = getRandom(R,CANVAS_HEIGHT*0.6-R,0);
            drowStar(cxt,R,r,left,top,rot,fillColor);
        }
        fillMoon(cxt,2,canvas.width-500,canvas.height/3,100,35,"#fb5");
        drowLand(cxt,canvas);
        cxt.font = "70px bold";
        cxt.fillStyle = "white";
        var str = "学习<<Canvas>>的基础";
        var str1 = "——慕课网";
        cxt.textAlign = "left";
        cxt.fillText(str,100,canvas.height*0.8);
        cxt.textAlign = "left";
        cxt.fillText(str1,800,canvas.height*0.95);
    };
    /*
    * 绘制五角星
    * @params
    * cxt object 绘图上下文环境
    * R int 五角星外围顶点半径
    * r int 内围顶点半径
    * offsetLeft X坐标偏移量
    * offsetTop Y坐标偏移量
    * rot 旋转角度
    * fillColor 填充色
    * strokeColor 边框色
    * strokeWidth 线条宽度
    * */
    function drowStar(cxt,R,r,offsetLeft,offsetTop,rot,fillColor,strokeColor,strokeWidth) {
        rot = arguments[5]?arguments[5]:0;
        fillColor = arguments[6]?arguments[6]:0;
        strokeColor = arguments[7]?arguments[7]:0;
        strokeWidth = arguments[8]?arguments[8]:1;
        cxt.beginPath();
        for(var i =0;i<5;i++){
            cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+offsetLeft,-Math.sin((18+i*72-rot)/180*Math.PI)*R+offsetTop);
            cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+offsetLeft,-Math.sin((54+i*72-rot)/180*Math.PI)*r+offsetTop);
        }
        cxt.closePath();
        if(fillColor){
            cxt.fillStyle = fillColor;
        }
        if(fillColor){
            cxt.fill();
        }
        if(strokeColor){
            cxt.strokeStyle = strokeColor;
        }
        if(strokeWidth){
            cxt.lineWidth = strokeWidth;
        }
        if(strokeColor || strokeWidth) {
            cxt.stroke();
        }
    }

    /*
     * 随机颜色
     * */
    function getColor() {
        var rgb = "rgb(";
        for(var i = 0;i<3;i++){
            if(i != 2) {
                rgb += getRandom(0,255,'') + ",";
            }else{
                rgb += getRandom(0,255,'') + ")";
            }
        }
        return rgb;
    }

    /*
     * 随机数
     * */
    function getRandom(start,end,math) {
        var diff = end - start;
        if(math === 0){
            var index = Math.random()*diff+start;
        }else if(math === -1){
            var index = Math.floor(Math.random()*diff)+start;
        }else if(math === 1){
            var index = Math.ceil(Math.random()*diff)+start;
        }else if(math === '') {
            var index = Math.round(Math.random() * diff) + start;
        }
        return index;
    }


    /*
     * 填充弯月
     * */
    function fillMoon(cxt,d,x,y,R,rot,fillColor) {
        cxt.save();
        cxt.translate(x,y);
        cxt.rotate(rot*Math.PI/180);
        cxt.scale(R,R);
        pathMoon(cxt,d);
        cxt.fillStyle = fillColor||"#fb5";
        cxt.fill();
        cxt.restore();
    }

    /*
     * 绘制弯月
     * arcTo绘制注意笔尖的位置
     * 也可以使用两个实心圆重合的方式绘制
     * */
    function pathMoon(cxt,d) {
        cxt.beginPath();
        cxt.arc(0,0,1,1.5*Math.PI,0.5*Math.PI);
//        cxt.fillStyle = "#fb5";
//        cxt.fill();
//        cxt.beginPath();
//        cxt.arc(-0.5,0,1,0,2*Math.PI);
//        cxt.fillStyle = "#fff";
        cxt.arcTo(d,0,0,-1,dis(0,-1,d,0)/d);
        cxt.closePath();
    }

    /*
     * 已知两点坐标求长度
     * */
    function dis(x1,y1,x2,y2) {
        return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
    }
    /*
    * 绘制陆地
    * */
    function drowLand(cxt,canvas) {
        cxt.save();
        cxt.beginPath();
        cxt.moveTo(0,canvas.height*3/4);
        cxt.bezierCurveTo(canvas.width/2,canvas.height/3,canvas.width/2,canvas.height*1.07,canvas.width,canvas.height*2/3);
        cxt.lineTo(canvas.width,canvas.height);
        cxt.lineTo(0,canvas.height);
        cxt.closePath();
        var linear = cxt.createLinearGradient(canvas.width,0,canvas.width,canvas.height);
        linear.addColorStop(0.0,"#580");
        linear.addColorStop(1.0,"#030");
        cxt.fillStyle = linear;
        cxt.fill();
        cxt.restore();
    }
</script>
</html>